<template>
  <div class="screenwriter-container">
    <div class="header">
      <h1>AI 编剧助手</h1>
      <div class="header-actions">
        <el-button type="primary" @click="createScript">创建剧本</el-button>
        <el-button @click="importScript">导入剧本</el-button>
        <el-button @click="exportScript">导出剧本</el-button>
      </div>
    </div>

    <div class="main-content">
      <div class="sidebar">
        <el-menu
          :default-active="activeMenu"
          class="sidebar-menu"
          @select="handleMenuSelect"
        >
          <el-menu-item index="script">
            <el-icon><Document /></el-icon>
            <span>剧本管理</span>
          </el-menu-item>
          <el-menu-item index="plot">
            <el-icon><Document /></el-icon>
            <span>AI 情节助手</span>
          </el-menu-item>
          <el-menu-item index="character">
            <el-icon><User /></el-icon>
            <span>人物设定</span>
          </el-menu-item>
          <el-menu-item index="outline">
            <el-icon><List /></el-icon>
            <span>故事大纲</span>
          </el-menu-item>
          <el-menu-item index="storyboard">
            <el-icon><Picture /></el-icon>
            <span>分镜管理</span>
          </el-menu-item>
          <el-menu-item index="dialogue">
            <el-icon><ChatDotRound /></el-icon>
            <span>台词优化</span>
          </el-menu-item>
          <el-menu-item index="format">
            <el-icon><Operation /></el-icon>
            <span>剧本格式化</span>
          </el-menu-item>
          <el-menu-item index="collaboration">
            <el-icon><Share /></el-icon>
            <span>协作功能</span>
          </el-menu-item>
        </el-menu>
      </div>

      <div class="content">
        <component
          :is="currentComponent"
          v-if="currentComponent"
          @apply-dialogue="handleApplyDialogue"
        />
        <div v-else class="welcome">
          <h2>欢迎使用 AI 编剧助手</h2>
          <p>请从左侧菜单选择功能开始创作</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, shallowRef } from 'vue'
import { ElMessage } from 'element-plus'
import {
  Document,
  User,
  List,
  Picture,
  ChatDotRound,
  Operation,
  Share
} from '@element-plus/icons-vue'

// 导入组件
import ScriptManager from '@/components/ai/ScriptManager.vue'
import PlotAssistant from '@/components/ai/PlotAssistant.vue'
import CharacterSetting from '@/components/ai/CharacterSetting.vue'
import StoryOutline from '@/components/ai/StoryOutline.vue'
import Storyboard from '@/components/ai/Storyboard.vue'
import DialogueOptimizer from '@/components/ai/DialogueOptimizer.vue'
import ScriptFormatter from '@/components/ai/ScriptFormatter.vue'
import Collaboration from '@/components/ai/Collaboration.vue'

const activeMenu = ref('script')
const currentComponent = shallowRef(ScriptManager)

const handleMenuSelect = (index) => {
  activeMenu.value = index
  switch (index) {
    case 'script':
      currentComponent.value = ScriptManager
      break
    case 'plot':
      currentComponent.value = PlotAssistant
      break
    case 'character':
      currentComponent.value = CharacterSetting
      break
    case 'outline':
      currentComponent.value = StoryOutline
      break
    case 'storyboard':
      currentComponent.value = Storyboard
      break
    case 'dialogue':
      currentComponent.value = DialogueOptimizer
      break
    case 'format':
      currentComponent.value = ScriptFormatter
      break
    case 'collaboration':
      currentComponent.value = Collaboration
      break
  }
}

const createScript = () => {
  ElMessage.info('创建剧本功能开发中')
}

const importScript = () => {
  ElMessage.info('导入剧本功能开发中')
}

const exportScript = () => {
  ElMessage.info('导出剧本功能开发中')
}

const handleApplyDialogue = (dialogue) => {
  ElMessage.success('已应用优化后的台词')
}
</script>

<style scoped>
.screenwriter-container {
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: #f5f7fa;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 24px;
  background: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.header h1 {
  margin: 0;
  font-size: 24px;
  color: #303133;
}

.header-actions {
  display: flex;
  gap: 12px;
}

.main-content {
  flex: 1;
  display: flex;
  overflow: hidden;
}

.sidebar {
  width: 240px;
  background: #fff;
  border-right: 1px solid #e4e7ed;
  overflow-y: auto;
}

.sidebar-menu {
  border-right: none;
}

.content {
  flex: 1;
  padding: 24px;
  overflow-y: auto;
}

.welcome {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #909399;
}

.welcome h2 {
  margin-bottom: 16px;
  font-size: 28px;
}
</style>
